import React, { useState } from 'react';

import { Form, Radio, Modal, Select, Upload,message } from 'antd';
import { FormValueType, TreeNode } from '../data.d';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import styles from '../style.less';
const { Option } = Select;
const FormItem = Form.Item;
import filelogo from '/public/file.jpg';

export interface UpdateFormProps {

  onCancel: () => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  values: FormValueType;
  typeValues:API.DictItem[];
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [formVals, setFormVals] = useState<FormValueType>(props.values);
 console.log(formVals)
  const [form] = Form.useForm();
  const [loading, setLoading] = useState<boolean>(false);
  const { updateModalVisible, onSubmit: handleUpdate,  onCancel,typeValues} = props;

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
  
    fieldsValue.attachCode= formVals.attachCode;
    fieldsValue.drawingId= formVals.drawingId;
    formVals.attachCode='';
    formVals.fileType='';
    formVals.fileName='';
    form.resetFields();
    console.log(fieldsValue)
    handleUpdate(fieldsValue);
  };
 
  const handleChange = (info: any) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    console.log(info.file);
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      const file = info.file.response;
      console.log(file);
     
      setFormVals({ ...formVals, ...file });
      console.log(formVals)
      setLoading(false);
    }
  };


 
   

   
  const beforeUpload = (file: any) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传JPG/PNG文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图像必须小于2MB!');
    }
    return isJpgOrPng && isLt2M;
  }

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div className="ant-upload-text">上传图纸</div>
    </div>
  );
  const fileDoc=function (){
    if(formVals.suffix=="jpg"||formVals.suffix=="jpeg"||formVals.suffix=="png"){
      return ( <img src={ formVals.path} alt="avatar" style={{ width: '100px',height:'100px' }} />)
    }else{
      return ( <img src={filelogo} alt="avatar" style={{ width: '100%',height:'100px' }} />)
    }
       
  }

  return (
    <Modal
      width={640}
     
      destroyOnClose
      title="编辑图纸"
      visible={updateModalVisible}
      footer={<div ><button type="button" class="ant-btn" onClick={onCancel} ><span>取 消</span></button><button type="button" onClick={okHandle} disabled={loading}  class="ant-btn ant-btn-primary"><span>确 定</span></button></div>}
      // onOk={okHandle}
      onCancel={() => onCancel()}
    
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          drawingName: formVals.drawingName,
          typeId: formVals.typeId,
          attachCode: formVals.attachCode,
          drawingDesc:formVals.drawingDesc,
        }}
      >
        <FormItem
          label="图纸分类"
          name="typeId"
          rules={[{ required: true, message: '请输入至少三个字符！', min: 3 }]}
        >
         <Select placeholder="请选择图纸分类" >
                {typeValues.map((item) => (
                    <Option key={item.dictCode} value={item.dictCode}>
                    {item.dictValue}
                  </Option>
              ))}
            </Select> 
        </FormItem>
        <FormItem
          label="图纸"
          name="attachCode"
        >
        <Upload
                name="file"
                listType="picture-card"
                showUploadList={false}
                className={styles.uploader}
                data={{id:formVals.drawingId}}
               // headers={{ 'x-auth-token': getToken() }}
                action="/api/drawingfileUpload"
               // beforeUpload={beforeUpload}
                onChange={handleChange}
                // disabled={true}
              >
              {formVals.path ? fileDoc() : uploadButton}
              </Upload>
         
        </FormItem>
     
        
     
      </Form>
    </Modal>
  );
};

export default UpdateForm;
